import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, pageSize, getAvatar, memberTypeArr, subtime } from "../../utils/common";
import teamStyleSheet from "./team_styles";
import right from "../../assets/img/right.png";
import none_people from "../../assets/img/none_people.png";
var _styleSheet = teamStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Company = class Company extends Component {
  constructor(props) {
    super(props);
    this.state = {
      memberTypeArr: memberTypeArr,
      currentNavId: 0,
      items: [],
      totalCount: 0,
      pageIndex: 1,
      pageSize,
      shareCount: {}
    };
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '我的团队' });
    this.getSpreadUsers();
    this.getUserShareCount();
  }
  getUserShareCount() {
    let { userStore } = this.props.stores;
    userStore.getUserShareCount({
      callback: res => {
        this.setState({ shareCount: toJS(res) });
      }
    });
  }
  getSpreadUsers() {
    let { userStore } = this.props.stores;
    let { currentNavId, pageIndex, pageSize } = this.state;
    userStore.getSpreadUsers({
      formLevel: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: toJS(res.totalCount), items: toJS(res.items) });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({ totalCount: res.totalCount, items });
        }
      }
    });
  }
  changeCurrentNavId(id) {
    this.setState({
      currentNavId: id,
      items: []
    }, () => {
      this.getSpreadUsers();
    });
  }
  teamMember(item) {
    // 缓存信息给下个页面使用
    getRuntime().setStorage('fatherUser', item);
    getRuntime().navigateTo('/pages/user/team_member?id=' + item.id);
  }
  render() {
    let { currentNavId, items, shareCount } = this.state;
    return <View>
        <View style={_styleSheet["team-type"]}>
          <View onClick={this.changeCurrentNavId.bind(this, 0)} style={_getStyle(currentNavId === 0 ? 'item item-active' : 'item')}>
            <View style={_styleSheet["name"]}>普通会员</View>
            <View style={_styleSheet["count"]}>{shareCount.normalCount}</View>
          </View>
          <View onClick={this.changeCurrentNavId.bind(this, 1)} style={_getStyle(currentNavId === 1 ? 'item item-active' : 'item')}>
            <View style={_styleSheet["name"]}>VIP会员</View>
            <View style={_styleSheet["count"]}>{shareCount.vipCount}</View>
          </View>
          <View onClick={this.changeCurrentNavId.bind(this, 2)} style={_getStyle(currentNavId === 2 ? 'item item-active' : 'item')}>
            <View style={_styleSheet["name"]}>代理商</View>
            <View style={_styleSheet["count"]}>{shareCount.agentCount}</View>
          </View>
          <View onClick={this.changeCurrentNavId.bind(this, 3)} style={_getStyle(currentNavId === 3 ? 'item item-active' : 'item')}>
            <View style={_styleSheet["name"]}>合伙人</View>
            <View style={_styleSheet["count"]}>{shareCount.partnerCount}</View>
          </View>
        </View>
        {items.length > 0 && <View style={_styleSheet["my-my_team"]}>
            <View style={_styleSheet["interval"]} />
            {items.map(item => {
          return <View onClick={this.teamMember.bind(this, item)} style={_styleSheet["list-18-item"]}>
                    <Image src={getAvatar(item.avatar)} style={_styleSheet["img"]} />
                    <View style={_styleSheet["r"]}>
                      <View style={[_styleSheet["line"], _styleSheet["line1"]]}>
                        <View style={_styleSheet["list-title"]}><Text>{item.name}</Text>
                          {item.agencyLevel === 0 && <Text style={[_styleSheet["list-label"], _styleSheet["list-label0"]]}>普通会员</Text>}
                          {item.agencyLevel === 1 && <Text style={[_styleSheet["list-label"], _styleSheet["list-label1"]]}>VIP会员</Text>}
                          {item.agencyLevel === 2 && <Text style={[_styleSheet["list-label"], _styleSheet["list-label2"]]}>代理商</Text>}
                          {item.agencyLevel === 3 && <Text style={[_styleSheet["list-label"], _styleSheet["list-label3"]]}>合伙人</Text>}
                        </View>
                        <View style={_styleSheet["list-info"]}>{subtime(item.creationTime)}</View>
                      </View>
                      <View style={[_styleSheet["line"], _styleSheet["line2"]]}>
                        <View style={_styleSheet["list-title"]}>{item.shareCount}个成员</View>
                        <Image src={right} style={_styleSheet["icon"]} />
                      </View>
                    </View>
                  </View>;
        })}
        </View>}
        {items.length <= 0 && <View style={_styleSheet["my-my_team_none"]}>

              <View style={_styleSheet["none-info"]}>
                  <Image src={none_people} style={_styleSheet["none-icon"]} />
                  <Text style={[_styleSheet["none-title"], _styleSheet["list-desc"]]}>暂时还没有团队成员哦~</Text>
                  <View onClick={this.handelRouter.bind(this, '/pages/user/qrcode')} style={_styleSheet["btn-line-submit"]}>+邀请好友</View>
              </View>
          </View>}
      </View>;
  }
};
Company = tslib_1.__decorate([inject("stores"), observer], Company);
export default Company;